<script setup lang="ts">
import { useRoute } from 'vue-router'
import { fetchCityCluster } from '@/services/api/scenic.ts'
import { ref } from 'vue'
import type { CityScenic } from '@/utils/dataType/ScenicModel.ts'

const route = useRoute()
const city = route.params.city
console.log(city)
const activeName = ref('scenic')
const cityScenics = ref<Array<CityScenic>>([{}])
const currentPage = ref(1)
const total = ref(0)

async function fetchCityDetail(page) {
  try {
    const res = await fetchCityCluster({ cityName: city, page, pageSize: 10 })
    if (res.data.total != 0) {
      cityScenics.value = res.data.records
      total.value = res.data.total
    }
  } catch (error) {
    console.error('查询城市的景点:失败', error)
  }
  // const res = await fetchCityCluster({ cityName: city, page, pageSize: 10 })
  // if (res.status == 200 && res.data.code == 1) {
  //   if (res.data.data.total != 0) {
  //     cityScenics.value = res.data.data.records
  //     total.value = res.data.data.total
  //   }
  // }
}

fetchCityDetail(currentPage.value)
const handleChangePage = (val: number) => {
  fetchCityDetail(val)
}
</script>

<template>
  <div id="city-detail">
    <h1>{{ city }}</h1>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="景点" name="scenic">
        <div class="scenic-list" v-if="cityScenics != null && total != 0">
          <el-row>
            <el-col :md="18" :xs="24">
              <div v-for="(scenic, index) in cityScenics" :key="index" class="scenic-card">
                <el-row gutter="20">
                  <el-col :span="6">
                    <img
                      v-if="scenic.scenicPics && scenic.scenicPics.length >= 1"
                      :src="
                        scenic.scenicPics[1] ||
                        'https://cdn.jsdelivr.net/gh/xiaoliao111/sta-images@main/scenery/30c7cb19-7771-4e1e-9599-444510e2499e.jpg'
                      "
                      class="scenic-img"
                    />
                    <img v-else src="@/assets/path1.jpg" class="scenic-img" />
                  </el-col>
                  <el-col :span="18">
                    <div class="scenic-info">
                      <h4 class="scenic-name">
                        <router-link :to="`/show-scenic/${scenic.scenicId}`">
                          {{ scenic.scenicName }}
                        </router-link>
                      </h4>
                      <div class="scenic-tags">
                        <span v-for="(tag, index) in scenic.tags" :key="index" class="scenic-tag">{{
                          tag
                        }}</span>
                      </div>
                      <div class="scenic-meta">
                        <span>🔥 {{ scenic.popularity }}</span>
                        <span>⭐ {{ scenic.rating }}</span>
                        <span>{{ scenic.commentNumbers }}条点评</span>
                      </div>
                      <p class="scenic-address">📍 地址：{{ scenic.address }}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-pagination
                v-model:current-page="currentPage"
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="handleChangePage"
              />
            </el-col>
            <el-col :md="5" :offset="1" :xs="24">
              <div class="recommend"></div>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-empty description="该城市暂无景点信息"></el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
#city-detail {
  width: 90%;
  margin: 20px auto;
  padding: 20px;
}

.scenic-card {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.scenic-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
}

.scenic-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  text-align: left;
}

.scenic-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.scenic-tags {
  margin-bottom: 8px;
}

.scenic-tag {
  display: inline-block;
  background-color: #e0f7fa;
  color: #00796b;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 12px;
  margin-right: 6px;
  margin-bottom: 4px;
}

.scenic-meta {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

.scenic-meta span {
  margin-right: 16px;
}

.scenic-address {
  font-size: 13px;
  color: #888;
}

.recommend {
  background-color: #fff;
  width: 100%;
  height: 250px;
  border-radius: 8px;
  border: 1px solid #fff;
}
</style>
